<!-- 
    table组件
    使用时需要传tableOptions、tableData、tableColumnOptionsData、operateOptions、pagerOptions配置项
    具体配置内容信息可参考ts文件
 -->
<template>
    <div class="zdy-table">
        <div class="table-box">
            <el-table v-loading="tableOptions.loading" :data="tableData">
                <!-- 数据 -->
                <template v-for="(item, index) in tableColumnOptionsData" :key="index">
                    <!-- 没有tag标签 -->
                    <el-table-column v-if="!item.tag" :prop="item.prop" :label="item.label"
                        :width="item.width"></el-table-column>
                    <!-- 有tag标签 -->
                    <el-table-column v-else :prop="item.prop" :label="item.label" :width="item.width">
                        <template #="{ row }">
                            <!-- tab列的索引 -->
                            <el-tag v-if="index == 1">{{ row.name }}</el-tag>
                            <template v-if="index == 2">
                                <!-- 如果使用tag标签，那么必须传一个数组格式 -->
                                <el-tag v-for="(TagItem, TagIdx) in row.tagArr" :key="TagIdx"> {{ TagItem }}</el-tag>
                            </template>
                        </template>
                    </el-table-column>
                </template>
                <!-- 操作 -->
                <el-table-column v-if="operateOptions.isoperate" :label="operateOptions.label">
                    <template #default="scope">
                        <template v-for="(item2, index2) in operateOptions.operatearr" :key="index2">
                            <!-- 没有气泡 -->
                            <el-button v-if="!item2.popconfirm" :type="item2.type" :size="item2.size"
                                @click="ChangeOperate(scope.row, item2, index2)">{{
                                    item2.text }}</el-button>
                            <!-- 有气泡 -->
                            <el-popconfirm v-else :title="`确认${item2.text}${scope.row.name}吗？`"
                                @confirm="ChangePopconfirm(scope.row)">
                                <template #reference>
                                    <el-button :type="item2.type" :size="item2.size">{{ item2.text }}</el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页器 -->
        <div class="pager-box">
            <el-pagination :total="pagerOptions.total" v-model:current-page="pagerOptions.CurrentPage"
                v-model:page-size="pagerOptions.PageSize" :layout="pagerOptions.layout"
                @current-change="ChangeCurrentPage" />
        </div>
        <!-- 抽屉 -->
        <el-drawer v-model="showdrawer" v-if="FilterShowDrawer">
            <template #header>
            </template>
            <template #default>
            </template>
            <template #footer>
            </template>
        </el-drawer>
    </div>
</template>

<script setup lang="ts">
import { TableOptions, TableColumnOptions, TableData, OperateOptions, PagerOptions } from './type/index.ts'
import { PropType, reactive, computed, ref } from 'vue'
const props = defineProps({
    // table配置项
    tableOptions: {
        type: Object as PropType<TableOptions>,
        default: () => { }
    },

    // table数据
    tableData: {
        type: Array as PropType<TableData[]>,
        default: () => []
    },

    // table-column配置项
    tableColumnOptionsData: {
        type: Array as PropType<TableColumnOptions[]>,
        required: true,
    },

    // 操作配置项
    operateOptions: {
        type: Object as PropType<OperateOptions>,
        default: () => { }
    },

    // 分页器配置项
    pagerOptions: {
        type: Object as PropType<PagerOptions>,
        default: () => ({
            layout: 'prev, pager, next',
            total: 0,
            background: false,
            small: false,
            CurrentPage: 1,
            PageSize: 3,
        })
    }
})

let showdrawer = ref<boolean>(false)    //  抽屉是否显示

const $emit = defineEmits(['updateTableData'])

let ColletData = reactive({
    CurrentPage: 0,    // 页数
    PopconfirmId: null, // 气泡框id
})

/**
 * 操作配置项-operatearr下的showdrawer
 * 找到该数组下第一个为true的，然后并设置为抽屉是否显示
 */
const FilterShowDrawer = computed(() => {
    return props.operateOptions.operatearr.find(x => x.showdrawer)
})

/**
 * 操作button按钮
 * @param row 当前列
 * @param item 当前数组的每一个元素
 * @param idx 点击当前列的哪个按钮(如:0是编辑,1是删除)
 */
const ChangeOperate = (row: any, item: any, idx: number) => {
    console.log(row, item, idx);
    const MapOperations: any = {
        0: (): void => {  // 编辑
            if (item.showdrawer) {
                showdrawer.value = true
            }
        },
        1: () => { // 删除 

        }
    }

    MapOperations[idx]?.()
}

/**
 * 操作分页器页数
 * @param value 当前哪页
 */
const ChangeCurrentPage = (value: number) => {
    console.log('????', value);
    ColletData.CurrentPage = value    // 收集参数
    $emit('updateTableData', ColletData)   // 统一函数，由父组件处理参数
    ChangeResettingAr() // 重置参数
}

/**
 * 气泡按钮确认框
 * @param row 当前列
 */
const ChangePopconfirm = (row: any) => {
    console.log(row);
    ColletData.PopconfirmId = row.id    // 收集参数
    $emit('updateTableData', ColletData)    // 统一函数，由父组件处理参数
    ChangeResettingAr() // 重置参数
}

/**
 * 重置ColletData参数
 */
const ChangeResettingAr = () => {
    Object.assign(ColletData, {
        CurrentPage: 0,
        PopconfirmId: null,
    })
}
</script>

<style scoped lang="scss">
.pager-box {
    margin-top: 10px;
}
</style>
